<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <title>Historial</title>
    <link href="/EmergenciasWAR/public/css/bootstrap.min.css" rel='stylesheet' type='text/css' />
    <link href="/EmergenciasWAR/public/css/bootstrap-select.min.css" rel='stylesheet' type='text/css' />
    <link href="/EmergenciasWAR/public/css/bootstrap-table.min.css" rel='stylesheet' type='text/css' />

    <script src="/EmergenciasWAR/public/js/jquery/jquery.min.js" charset="UTF-8" type="text/javascript"></script>   
    <script src="/EmergenciasWAR/public/js/bootstrap/bootstrap.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="/EmergenciasWAR/public/js/bootstrap/bootstrap-select.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="/EmergenciasWAR/public/js/bootstrap/bootbox.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="/EmergenciasWAR/public/js/bootstrap/bootstrap-table.min.js" charset="UTF-8" type="text/javascript"></script>
    <script src="/EmergenciasWAR/public/js/bootstrap/bootstrap-table-es-AR.js" charset="UTF-8" type="text/javascript"></script>        
    <script src="/EmergenciasWAR/public/js/admin/historial.js" charset="UTF-8" type="text/javascript"></script>

</head>
<body>
    <jsp:include page="menu_barra.jsp"/>
    
    <div class="container">
        <div class="row" style="margin-top: 50px;">
            <br />
            <table class="table table-striped table-condensed"><tr><th><h4 class="text-info" align="center"><i class="glyphicon glyphicon-plus"></i> Seleccionar Paciente</h4></th></tr></table>
            <div class="col-md-6 col-md-offset-3" style="margin-bottom: 30px">
                <form id="agregarForm" class="form-horizontal">                                        

                    <div class="form-group">
                        <label class="control-label col-sm-3" for="inputPaciente">Paciente:</label>
                        <div class="col-sm-6">
                            <select class="selectpicker" id="inputPaciente" name="paciente" data-live-search="true" title="Seleccione un paciente">
                                <c:forEach var="item" items="${it.pacientes}">                                                
                                    <option value="${item.idPersona}">${item.nombres}</option>
                                </c:forEach>
                            </select>
                        </div>
                    </div>                    

                    <div class="row">
                        <div class="col-lg-4"></div>
                        <div class="controls col-lg-8">
                            <button type="button" class="btn btn-primary" id="buttonConsultar" > Consultar</button>
                        </div>
                    </div>
                </form>  
            </div>

            <div class="table-responsive">
                <table class="table table-striped table-condensed" style="margin-bottom: -10px"><tr><th><h4 class="text-info" align="center"><i class="glyphicon glyphicon-list"></i> Lista de Pacientes</h4></th></tr></table>
                <table id="assigned-vm-table" data-toggle="table" data-cache="false" data-show-toggle="true" data-search="true">
                    <thead>
                        <tr class='warning'>

                            <th data-field="doctor" data-align="right" data-sortable="true">Doctor</th>
                            <th data-field="fecha" data-align="right" data-sortable="true">Fecha</th>
                            <th data-field="regla" data-align="right" data-sortable="true">Regla</th>
                            <th data-field="medicion" data-align="right" data-sortable="true">Medici&oacute;n</th>                            
                        </tr>
                    </thead>
                </table>
            </div>

            <script>
                //cargarPacientes($("#inputPaciente"));
                $(".selectpicker").selectpicker();
                console.log("idPaciente: " + $("#inputPaciente").val());

                $("#buttonConsultar").click(function() {
                    console.log("idPaciente: " + $("#inputPaciente").val());

                    $('#assigned-vm-table').bootstrapTable(
                            "refresh",
                            "/EmergenciasWAR/historial/paciente/" + $("#inputPaciente").val()
                            );
                });
            </script>

        </div>    
    </div>
</body>